<template>
    <div class="home">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
        <tab-control class="tab-control1" ref="tabControl1" :titles="['流行', '新款', '精选']"
            @tabClick="tabClick" v-show="isFixed"></tab-control>
        <scroll class="content" ref="scroll" @scroll="scroll" :probeType2="3"
            @pullingUp="pullingUp" :pullUpLoad="true">
            <home-swiper :banners="banner" @swiper="swiper"></home-swiper>
                <recommend :recommends="recommend" @recommend1="recommend1"></recommend>
                <feature></feature>
                <tab-control ref="tabControl2" :titles="['流行', '新款', '精选']"
                    @tabClick="tabClick"></tab-control>
                <good-list :goods="showGoods" @imgLoad="imgLoad"></good-list>
        </scroll>
        <back-top @click.native="backTop" v-show="isShow"></back-top>
       
    </div>
</template>


<script>
import NavBar from 'components/common/navbar/NavBar'
import HomeSwiper from './childHome/HomeSwiper'
import Recommend from './childHome/Recommend.vue'
import Feature from './childHome/Feature.vue'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goodsList/GoodsList'
import Scroll from 'components/common/scroll/Scroll'


import {getHomeData, getHomeGoods} from 'network/home'

import { itemListerMixin } from 'common/mixins'







// import {request} from 'network/request'


export default {
    components: {
        NavBar,
        HomeSwiper,
        Recommend,
        Feature,
        TabControl,
        GoodList,
        Scroll,
        
        
    },
    data() {
        return {
            banner: [],
            recommend: [],
            goods: {
                'pop': {page: 0, list: []},  
                'new': {page: 0, list: []},
                'sell': {page: 0, list: []}
            },
            currentType: 'pop',
            
            // refresh: null,
            offsetTop: null,
            isFixed: null,
            saveY: 0
            
        }
    },
    created() {
        this.getHomeData2()
        // request({
        //     url: '/home/multidata'
        // }).then(res => {
        //     console.log(res);
            
        // })
        this.getHomeGoods2('new')
        this.getHomeGoods2('sell')
        this.getHomeGoods2('pop')
        console.log('创建时');
    },
    destroyed() {
        console.log('销毁时');
    },
    activated() {
        this.$refs.scroll.refresh2()
        this.$refs.scroll.scrollTo2(0, this.saveY, 0)
        
    },
    deactivated() {
        this.saveY = this.$refs.scroll.scroll.y
    },
    // mounted() {
    //     // 1. 方法一
    // //     const refresh = debounce(this.$refs.scroll && this.$refs.scroll.refresh2, 50)
    // //    this.$bus.$on('imgLoad', () => { 
    // //        refresh()  
        
            
    // //    })
    
    // // 2. 
    //     // this.refresh = debounce( this.$refs.scroll.refresh2, 100)
    // },
    mixins: [itemListerMixin],   
    methods: {
        getHomeData2() {
            getHomeData().then(res => {
                // console.log(res.data)
                this.banner = res.data.banner.list
                this.recommend = res.data.recommend.list

            }) 
        },
        getHomeGoods2(type) {
            // const page = this.goods[type].page + 1
            const page = this.goods[type].page += 1
            // console.log(this.goods[type].page)
            getHomeGoods(type, page).then(res => {
                // console.log(res)
                this.goods[type].list.push(...res.data.list)

                this.$refs.scroll.finishPullUp1()
            })
            // 打印不到scroll组件
            // console.log(this.$refs.scroll)
        },
        tabClick(index) {
            switch(index) {
                case 0 :
                    this.currentType = 'pop';
                    break;
                case 1 :
                    this.currentType = 'new';
                    break;
                case 2 :
                    this.currentType = 'sell';
                    break;
            }
            this.$refs.tabControl1.currentIndex = index
            this.$refs.tabControl2.currentIndex = index
        },
        
        scroll(position) {
            // console.log(999)
           this.isShow =  position.y < - 1000

            // 2. 
            // console.log(- position.y > this.offsetTop);
            this.isFixed = - position.y > this.offsetTop
           
        },
        pullingUp() {
            this.getHomeGoods2(this.currentType)
            // this.$refs.scroll.scroll.refresh()
            
            
            
        },
        imgLoad() {
            // console.log(0);
            
            this.refresh()
        },
        recommend1() {
            
            console.log(this.$refs.tabControl2.$el.offsetTop);
            this.offsetTop = this.$refs.tabControl2.$el.offsetTop
        },
        swiper() {
        //     console.log(this.$refs.tabControl2.$el.offsetTop);
        //     this.offsetTop = this.$refs.tabControl2.$el.offsetTop
        }
        
    },
    computed: {
        showGoods() {
           return this.goods[this.currentType].list
        }
    }
    
}
</script>


<style scoped>
    .home{
        /* padding-top: 44px; */
        height: 100vh;
    }
    .home-nav{
         /* position: fixed;
         left: 0;
         top: 0;
         width: 100%; */
         z-index: 9;
        color: #fff;
        background: var(--color-tint);
       
    }

    /* .tab-control{
        position: sticky;
        top: 44px;
    } */

    .content{
        height: calc(100% - 44px - 49px);
        overflow: hidden;
    }

    .tab-control1{
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 1;
    }
</style>